<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <div class="container-module" style="padding-bottom: 0">
        <el-form :inline="true" class="search-form" size="small" ref="searchForm" :model="searchForm">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item class="search-form-item" label="用户 ID">
                <el-input style="width: 100%" v-model="searchForm.params.user_id" placeholder="请输入运营id">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" label="用户名称">
                <el-input style="width: 100%" v-model="searchForm.params.nickname" placeholder="请输入用户名称"> </el-input>
              </el-form-item>            
              <el-form-item class="search-form-item" label="手机号">
                <el-input style="width: 100%" v-model="searchForm.params.mobile" placeholder="请输入手机号"> </el-input>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
                <el-button v-if="!searchDisplay" size="small" icon="el-icon-caret-bottom"
                  @click="searchDisplay = true">展开</el-button>
                <el-button v-else size="small" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
              </el-form-item>
            </div>
          </el-row>
          <el-form-item v-if="searchDisplay" class="search-form-item" label="所在分组">
            <el-select  placeholder="请选择" v-model="searchForm.params.market_group_id" style="width: 100%" filterable reserve-keyword>
              <el-option v-for="item in clustersList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        
          <el-form-item v-if="searchDisplay" class="search-form-item" label="入团时间">
            <el-date-picker @change="domeTimeWay" style="width: 100%" value-format="yyyy-MM-dd" v-model="establishTime"
              type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div style="padding: 0 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :span="20">
              <span>运营成员列表</span>
            </el-col>
            <el-col :span="4" style="float: right">
              <div class="right-panel el-button-group">
                <el-button class="" icon="el-icon-refresh" size="mini" @click="getList"></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                      <el-checkbox v-model="checkboxTableThead"
                        :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col class="new_table_card">
            <el-table highlight-current-row :data="managerList" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%" v-loading="loading">
              <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
                min-width="80" align="center">
                <template slot-scope="scope">
                  <div v-if="fruit == 'region'">
                    <el-tooltip class="item" effect="dark"
                      :content="scope.row.province_name + scope.row.city_name +''" placement="top">
                      <div>
                        {{scope.row.province_name}}{{scope.row.city_name}}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else-if="fruit == 'monthly_excuse_number'">
                    <el-tooltip placement="top-start" :content="scope.row.refund.refund_total_num + ''">
                      <div class="one_line_hidden">
                        {{scope.row.refund.refund_total_num}}
                      </div>
                    </el-tooltip>
                  </div>
                
                  <div v-else>
                    <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="right" width="180" prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="group_adjustment(scope.row)"
                  >
                    调组
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="unbind(scope.row)"
                  >
                    解绑
                  </el-button>
                </template>
              </el-table-column>
            </el-table></el-col>
        </el-row>
        <el-row style="text-align: right">
          <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
            @pagination="getList" />
        </el-row>
      </div>
    </div>
     <!-- 调组 -->
     <el-dialog
      title="调配分组"
      :visible.sync="dialogClass"
      width="600px"
      :before-close="CloseDialogLabel"
    >
      <el-row :gutter="20">
        <el-form
          :model="ruleFormClass"
          :rules="rulesgrounp"
          ref="rulesgrounp"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-col :span="22">
            <el-form-item label="当前分组">
              {{ groupingname }}
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="调整到分组" prop="market_group_id">
              <el-select
                clearable
                v-model="ruleFormClass.market_group_id"
                placeholder="请选择分组"
              >
                <el-option
                  v-for="item in groupings"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CloseDialogLabel">取 消</el-button>
        <el-button
          type="primary"
          :loading="butloading"
          @click="submitFormClass()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    managerindex,
    grounplist,
    managermove,
    roleDelete
  } from "@/api/manager/index";

  const tableTheadOption = {
    user_id: {
      label: "用户ID",
      field: "user_id",
    },
    region: {
      label: "负责区域",
      field: "region",
    },
    nickname: {
      label: "用户名称",
      field: "nickname",
    },
    market_manager_name: {
      label: "运营经理名称",
      field: "market_manager_name",
    },
    group_name:{
      label: "所在分组",
      field: "group_name",
    },
    member_num: {
      label: "团队人数",
      field: "member_num",
    },
    group_time: {
      label: "入组时间",
      field: "group_time",
    },
    user_total_num1: {
      label: "直推人数",
      field: "user_total_num1",
    },
    user_total_num2: {
      label: "间推人数",
      field: "user_total_num2",
    },
    monthl_ysales_money_actual: {
      label: "直推成交额",
      field: "monthl_ysales_money_actual",
    },
    user_total_num: {
      label: "邀请总人数",
      field: "user_total_num",
    },
  };
  const allTableThead = [
    "user_id",
    "region",
    "nickname",
    "market_manager_name",
    "group_name",
    "member_num",
    "group_time",
    "user_total_num1",
    "user_total_num2",
    "monthl_ysales_money_actual",
    "user_total_num",
  ];
  const defaultTableThead = [
    "user_id",
    "region",
    "nickname",
    "market_manager_name",
    "group_name",
    "member_num",
    "group_time",
    "user_total_num1",
    "user_total_num2",
    "monthl_ysales_money_actual",
    "user_total_num",
  ];
  export default {
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1;
        this.$nextTick(() => {
          this.$refs.tablerefs.doLayout();
        });
      },
    },
    components: {
    },
    data() {
      return {
        rulesgrounp: {
        market_group_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请选择分组"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      clustersList: [], //分组
      market_manager_id: "", //运营经理ID
        ruleFormClass: {//调整分组
          market_group_id: "",
          user_id: "", //列表的成员ID
        }, 
        searchgrounpForm: {
          page: 1,
          count: 30,
          params: {
            market_manager_id: "",
          },
        },
        groupings: [], //分组
        groupingname: "", //当前分组
        butloading:false,
        dialogClass: false, 
        loading: false, //加载
        establishTime: [],//入团时间段
        managerList: [], //列表数据
        reduce: 0,
        // 默认表头
        tableTheadOptions: tableTheadOption, //所有表头
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        searchDisplay: false,
        searchForm: {
          page: 1,
          count: 10,
          params: {
            market_group_id: '',
            market_manager_id:'',
            user_id:'',
            nickname:'',
            mobile:'',
            create_time_start: '',
            create_time_end: '',
          },
        },
        total: 0,
      };
    },
    created() {
      this.getList(); //运营成员
      this.getclusters(); //获取所有分组
    },
    methods: {
      // 关闭调组弹框
      CloseDialogLabel() {
        this.ruleFormClass = {
          user_id: "",
          market_group_id: "",
        };
        this.dialogClass = false;
        this.$refs.rulesgrounp.clearValidate();
      },
     

      //点击调组
      group_adjustment(row) {
        console.log(row)
        this.market_manager_id = row.market_manager_id
        this.ruleFormClass.user_id = row.user_id;
        this.groupingname = row.group_name;
        this.dialogClass = true;
        this.groupinglist();
      },
      //获取分组列表
    groupinglist() {
      let obj = {
        page:1,
        count:30,
        params:{
          market_manager_id:this.market_manager_id
        }
      }
      grounplist(obj).then((res) => {
        this.groupings = res.data.list;
      });
    },
    //获取所有分组
    getclusters() {
      let obj = {
        page:1,
        count:30,
        params:{}
      }
      grounplist(obj).then((res) => {
        this.clustersList = res.data.list;
      });
    },
        //保存分组
      submitFormClass() {
      let _this = this;
      _this.$refs.rulesgrounp.validate((valid) => {
        if (valid) {
          _this.butloading = true;
          managermove(_this.ruleFormClass).then((res) => {
            if (res.code !== 200) {
              _this.$messages.error(res.msg);
              _this.butloading = false;
              return;
            }
            _this.$messages.success("操作成功");
            _this.dialogClass = false;
            _this.butloading = false;
            this.ruleFormClass.user_id = "";
            this.ruleFormClass.market_group_id = "";
            this.getList();
          });
        } else {
          return false;
        }
      });
    },
  
      //解绑
    unbind(row) {
      this.$confirm(
        "您确定要解绑该成员吗? 解绑后，该成员自动脱离与当前团队的所有关系",
        "解绑操作",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          roleDelete({ user_id: row.user_id }).then((res) => {
            this.$messages.success("解绑成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
      // 获取列表
      getList() {
        this.loading = true
        managerindex(this.searchForm).then((res) => {
          console.log(res)
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            this.loading = false
            return;
          }
          this.managerList = res.data.list;
          this.total = res.data.total
          this.loading = false
        });

      },
      //重置
      resetting() {
        this.searchForm = {
          page: 1,
          count: 10,
          params: {
            market_group_id: '',
            market_manager_id:'',
            user_id:'',
            nickname:'',
            mobile:'',
            create_time_start: '',
            create_time_end: '',
          },
        }
        this.establishTime = []
        this.getList()
      },
      //入团时间
      domeTimeWay(val) {
        if (val.length !== 0) {
          this.searchForm.params.create_time_start = val[0];
          this.searchForm.params.create_time_end = val[1];
        } else {
          this.searchForm.params.create_time_start = "";
          this.searchForm.params.create_time_end = "";
        }
      },
    },
  };
</script>

<style>
</style>
